<template>
  <div class="mui-slider" id="z-slider" @slide="cutSlider()">
      <div class="mui-slider-group mui-slider-loop">
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate" v-if="banners.length>1">
          <a href="#" :style="{height:height+'rem'}">
            <img v-if="banners[banners.length-1].media_type==1" :src="banners[banners.length-1].image_url"/>
            <video v-if="banners[banners.length-1].media_type==2" :src="banners[banners.length-1].image_url" :poster="banners[banners.length-1].image_url+'.jpg'" controls="controls"/>
          </a>
        </div>
        <!--主循环-->
        <div class="mui-slider-item" v-for="banner in banners" :key="banner.id">
          <a href="#" :style="{height:height+'rem'}">
            <img v-if="banner.media_type==1" :src="banner.image_url"/>
            <video id="z-vide" v-if="banner.media_type==2" :src="banner.image_url" :poster="banner.image_url+'.jpg'" controls="controls" @play="beginplay()" @pause="endplay()"/>
          </a>
        </div>
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate" v-if="banners.length>1">
          <a href="#" :style="{height:height+'rem'}">
            <img v-if="banners[0].media_type==1" :src="banners[0].image_url"/>
            <video v-if="banners[0].media_type==2" :src="banners[0].image_url" :poster="banners[0].image_url+'.jpg'" controls="controls"/>
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator" :class="{'mui-active':index==0}" v-for="(banner,index) in banners" :key="banner.id"></div>
      </div>
    </div>
</template>

<script>
    export default {
      props: {
        banners:{
          type:Array,
          required:true
        },
        height: {
          type:Number,
          default:3.6
        }
      },
      mounted(){
        this.endplay();
      },
      updated(){
        this.endplay();
      },
      methods:{
        //视频开始播放事件（停止自动轮播）
        beginplay(){
          mui("#z-slider").slider({interval: 0});
        },
        //视频停止播放事件（开始自动轮播）
        endplay(){
          mui("#z-slider").slider({interval: 3000});
        },
        //轮播切换事件（停止播放视频）
        cutSlider(){
          var vide = mui("#z-vide")[0];
          if(vide && !vide.paused){
            vide.pause();
          }
        },
      }
    }
</script>

<style scoped lang="less">
  #z-slider {
    .mui-slider-group {
      .mui-slider-item {
        a {
          img {
            width: 100%;
            height: 100%;
          }
          video {
            width: 100%;
            height: 100%;
            object-fit: fill;
          }
        }
      }
    }
  }
</style>
